import React, { useEffect } from "react";
import * as echarts from 'echarts';

interface IData {
    listarr: any[];
    id: string;
}

const ChatPic: React.FC<IData> = ({
    listarr,
    id
}): React.ReactElement => {
    let initChart = () => {
        let element = document.getElementById(id);
        let myChart = echarts.init(element as HTMLDivElement);
        let list = [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ];
        let option: any = {
            title: {
                text: '六条类别',
                subtext: '销售数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '商品类别',
                    type: 'pie',
                    radius: '50%',
                    data: listarr,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    };

    useEffect(() => {
        initChart();
    });

    return (
        <div className="ChatPic">
            <div id={id} style={{ width: '100%', height: 400 }} />
        </div>
    )
}
export default ChatPic;